<template>
  <div>
    特性：
    <br />
    不需要手动传入依赖 每次初始化时会执行一次回调函数来自动获取依赖
    无法获取到原值，只能得到变化后的值
  </div>

  <div>{{ state.count }}</div>
  <div><button @click="clickHandle">watchEffect的使用</button></div>
</template>
<script>
import { reactive, watchEffect } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0, name: "zs" });
    // 不需要手动传入依赖 每次初始化时会执行一次回调函数来自动获取依赖
    // 无法获取到原值，只能得到变化后的值
    watchEffect(() => {
      console.log(state.count);
    });

    const clickHandle = () => {
      state.count++;
    };

    return {
      state,
      clickHandle,
    };
  },
};
</script>
